import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 如果我们只想简单的调整一个子元素在父元素中的位置的话，使用Align组件会更简单一些。
// alignment : 需要一个AlignmentGeometry类型的值，表示子组件在父组件中的起始位置。
// widthFactor和heightFactor是用于确定Align 组件本身宽高的属性；它们是两个缩放因子，会分别乘以子元素的宽、高，最终的结果就是Align 组件的宽高。如果值为null，则组件的宽高将会占用尽可能多的空间。

// Alignment.topRight 等于 Alignment(1.0, -1.0)

// Alignment Widget会以矩形的中心点作为坐标原点，即Alignment(0.0, 0.0) 。x、y的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离，因此2个水平（或垂直）单位则等于矩形的宽（或高），如Alignment(-1.0, -1.0) 代表矩形的左侧顶点，而Alignment(1.0, 1.0)代表右侧底部终点

// 实际偏移量计算公式（不知道说的是哪个点相对于那个点的偏移）
// (Alignment.x*childWidth/2+childWidth/2, Alignment.y*childHeight/2+childHeight/2)

// 1就是父一半减子一半
// 真正的子中心相对于父中心的偏移量
// Alignment.x * (parentWdith-childWidth)/2
// Alignment.y * (parentHeight-childHeight)/2

// 子左上角相对于父左上角偏移量
// Alignment.x * (parentWdith-childWidth)/2 - childWidth/2 + parentWdith/2 既
// (PW-CW)*(x+1)/2 既 父一半减子一半乘以（x+1）

// FractionalOffset 继承自 Alignment
// 它和 Alignment唯一的区别就是坐标原点不同！FractionalOffset 的坐标原点为矩形的左侧顶点，这和布局系统的一致
// 实际偏移 = (FractionalOffse.x * childWidth, FractionalOffse.y * childHeight)（也是错的）
// 子左上角相对于父左上角偏移量
// FractionalOffse.x * childWidth/2
// FractionalOffse.y * childHeight/2

// 我们可以认为Center组件其实是对齐方式确定（Alignment.center）了的Align

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(title)),
        body: Row(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: 90.0,
                  height: 90.0,
                  color: Colors.tealAccent,
                  child: Align(
                    alignment: Alignment(5, 1),
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
                Spacer(flex: 1),
                Container(
                  width: 120.0,
                  height: 120.0,
                  color: Colors.tealAccent,
                  child: Align(
                    alignment: Alignment(2, 1),
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
                Spacer(flex: 1),
                Container(
                  width: 120.0,
                  height: 120.0,
                  color: Colors.tealAccent,
                  child: Align(
                    alignment: Alignment.topRight,
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
                Spacer(flex: 1),
                // 上面的例子中，我们显式指定了Container的宽、高都为 120。如果我们不显式指定宽高，而通过同时指定widthFactor和heightFactor 为 2 也是可以达到同样的效果：
                Container(
                  color: Colors.tealAccent,
                  child: Align(
                    widthFactor: 2,
                    heightFactor: 2,
                    alignment: Alignment.topRight,
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
                Spacer(flex: 1),
                Container(
                  color: Colors.tealAccent,
                  child: Align(
                    widthFactor: 2,
                    heightFactor: 2,
                    alignment: Alignment(0, 0),
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
              ],
            ),
            Spacer(flex: 1),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 120.0,
                  width: 120.0,
                  color: Colors.blue[50],
                  child: Align(
                    alignment: FractionalOffset(0.2, 0.6),
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
                Container(
                  height: 90.0,
                  width: 90.0,
                  color: Colors.blue[50],
                  child: Align(
                    alignment: FractionalOffset(2, 1),
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
                DecoratedBox(
                  decoration: BoxDecoration(color: Colors.red),
                  child: Center(
                    widthFactor: 2,
                    heightFactor: 2,
                    child: Text("xxx"),
                  ),
                ),
                DecoratedBox(
                  decoration: BoxDecoration(color: Colors.red),
                  child: Center(
                    widthFactor: 1,
                    heightFactor: 1,
                    child: Text("xxx"),
                  ),
                )
              ],
            )
          ],
        ));
  }
}
